<template>
	<view class="recharge l-whitespace">
		<view class="recharge-ewm">
			<view class="recharge-wrap">
				<van-cell-group class="recharge-bg">
					<van-field
						clearable
						:value="integral"
						type="number"
						input-class="recharge-input"
						placeholder="请输入SEED数量"
						@change="onChange"
					/>
				</van-cell-group>
				<view class="recharge-info">
					<text class="recharge-info-txt">SEED余额 {{ balances }}</text>
				</view>
			</view>
			<view class="paly-btn">
				<van-button
					square
					type="primary"
					size="large"
					custom-class="paly-btn-bg"
					@tap="onPaySelect"
				>
					充值
				</van-button>
			</view>
		</view>
		<van-popup :show="popupShow" position="bottom" @close="onPopupClose">
			<view class="recharge-mod">
				<view class="recharge-title van-hairline--bottom">充值</view>
				<view class="iconfont iconguanbi" @tap="onPopupClose"></view>
				<view class="recharge-mod-wrap">
					<view class="rechargeItem">
						<view class="iconfont iconzhifubao"></view>
						<view></view>
					</view>
					<view class="rechargeItem">
						<view class="iconfont iconbig-WeChat"></view>
						<view></view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			integral: '',
			balances: 0,
			popupShow: false
		};
	},
	onLoad() {},
	methods: {
		onAllTransfer() {
			this.integral = this.balances;
		},
		onPaySelect() {
			this.popupShow = true;
		},
		onPopupClose() {
			this.popupShow = false;
		}
	}
};
</script>

<style scoped lang="scss">
.recharge {
	&-wrap {
		padding: 40upx 30upx;
		background-color: #fff;
	}
	&-input {
		height: 50px !important;
		background-color: #9b9b9b !important;
	}
	&-ewm {
		&-l {
			flex: 1;
		}
		&-r {
			width: 140upx;
		}
	}
	&-info {
		display: flex;
		justify-content: space-between;
		padding: 20upx 10upx;
		text {
			display: block;
		}
		&-txt {
			color: #9b9b9b;
		}
		&-btn {
			font-size: 28upx;
			color: #0079f3;
		}
	}

	.recharge-mod {
		position: relative;
		width: 100%;
		background-color: #fff;
		.iconguanbi {
			position: absolute;
			top: 30upx;
			right: 30upx;
			z-index: 2;
			width: 60upx;
			height: 60upx;
			font-size: 44upx;
			color: #9b9b9b;
		}
		.recharge {
			&-title {
				padding: 30upx 0;
				font-size: 34upx;
				text-align: center;
				border-top-left-radius: 40upx;
				border-top-right-radius: 40upx;
				overflow: hidden;
			}
			&-count {
				margin: 10upx 0;
				text-align: left;
				font-size: 26upx;
				&-item {
					padding: 0 10upx;
				}
			}
			&-group {
				margin-bottom: 40upx;
			}
		}
		.rechargeItem {
			padding: 20upx 0;
			text-align: center;
			.iconbig-WeChat {
				font-size: 60upx;
				color: #00cd00;
			}
			.iconzhifubao {
				font-size: 60upx;
				color: #1387ff;
			}
		}
		&-wrap {
			padding: 10upx 50upx 80upx 50upx;
		}
	}
}
</style>
